<template>
  <div class="home">
    <!-- $store.getters.screenWidth -->
    <slider :options="swiperOptions" style="height:auto">
      <slideritem v-for="(item,index) in imageList" :key="index">
        <div class="image_farther" @click="tovideo(item.link)">
          <img v-if="$store.getters.screenWidth" style="width:100%;" :src="item.img" />
          <img v-else style="width:100%;" :src="item.img" />
        </div>
      </slideritem>
    </slider>

    <center-title style="background:#f8f8f8;padding:30px 0;"></center-title>
    <center-product />
    <center-new />
    <about-us></about-us>
    <footer-part></footer-part>
  </div>
</template>

<script>
import {
  companyInfo,
  openIdGet,
  bindingWeixin,
  openidgetinfo
} from "../api/api";
import footerPart from "../views/footer";
import aboutUs from "./aboutUs";
import centerTitle from "../components/centerTitle";
import centerProduct from "../components/centerProduct";
import centerNew from "../components/centerNews";
import { banner } from "../api/api";
import { slider, slideritem } from "vue-concise-slider";
import axios from "axios";

export default {
  name: "home",

  data() {
    return {
      imageList: [
        { url: require("../assets/1515836974.jpg") },
        { url: require("../assets/1515836717.jpg") }
      ],
      swiperOptions: {
        pagination: true,
        thresholdDistance: 100, // Sliding distance threshold
        thresholdTime: 300, // Sliding time threshold decision
        grabCursor: true, // Scratch style
        speed: 300, // Sliding speed
        autoplay: 4000, // 自动滚动[ms]
        loop: true
        // timingFunction: 'ease', // Sliding mode
        // loop: false, // Infinite loop
        // autoplay: 0 // Auto play[ms]
      },
      isshow: true,
      companyInfo: {}
    };
  },

  components: {
    centerTitle,
    footerPart,
    aboutUs,
    centerProduct,
    centerNew,
    slider,
    slideritem
  },
  created() {
    this.getbanner();
    this.getCompanyInfo();
  
    if (this.$route.query.code) {
      openIdGet({
        code: this.$route.query.code
      })
        .then(async res => {
          window.sessionStorage.setItem("openId", res.data.openId);
          const { data } = await openidgetinfo({
            openId: res.data.openId
          });
          console.log("0000000000000000", data);
          if (data) {
            this.$store.commit("settoekn", data.token);
            this.$store.commit("setname", data.username);
            this.$store.commit("setUserId", data.userId);
          }
        })
        .catch(err => {});
    }

    if (
      window.sessionStorage.getItem("openId") &&
      this.$store.getters["userId"]
    ) {
      let p = window.sessionStorage.getItem("openId");
      bindingWeixin({
        openId: window.sessionStorage.getItem("openId"),
        uid: this.$store.getters["userId"]
      });
    }
  },

  methods: {
    getCompanyInfo() {
      let that = this;
      companyInfo().then(res => {
        console.log("ress", res);
        that.companyInfo = res.data;
        window.document.title = res.data.title;
        // that.$store.commit('sethomeInfo',that.companyInfo)
      });
    },
    getbanner() {
      let that = this;
      banner({
        pageNo: 0,
        pageSize: 0,
        pageType: "A"
      }).then(res => {
        console.log("res--", res.data.data);
        that.imageList = res.data.data;
      });
    },
    tovideo(link) {
      if (link.indexOf("/videoDetail") > 0) {
        let code1 = decodeURIComponent(link.match(/\?link=(.*)/)[1]);
        this.$router.push({ path: "/videoDetail", query: { userId: code1 } });
      } else {
        if (link) {
          window.location.href = link;
        }
      }
    },
    change_item(index) {
      console.log("index", index);
      if (index == 0) {
        setTimeout(() => {
          this.isshow = true;
        }, 500);
      } else {
        this.isshow = false;
      }
    }
  }
};
</script>
<style lang='scss'>
.swiper-container-horizontal > .slider-pagination-bullets {
  bottom: 30px !important;
}
.el-carousel__container {
  height: 100% !important;
}
.home {
  height: calc(100vh - 60px);
  .image_farther {
    position: relative;
    height: 100%;
    .image_farther_title {
      top: 50%;
      left: 50px;
      color: #fff;
      font-size: 35px;
      position: absolute;
      animation: myfirst 1s;
      -webkit-animation: myfirst 1s forwards; /* Safari and Chrome */
    }
    .image_farther_english {
      top: 35%;
      left: 50px;
      color: #fff;
      font-size: 35px;
      position: absolute;
      animation: mySecond 1s;
      -webkit-animation: mySecond 1s forwards; /* Safari and Chrome */
    }
    @-webkit-keyframes myfirst {
      0% {
        top: 45%;
      }
      100% {
        top: 50%;
      }
    }
    @keyframes myfirst {
      0% {
        top: 65%;
      }
      100% {
        top: 55%;
      }
    }

    @keyframes mySecond {
      0% {
        top: 25%;
      }
      100% {
        top: 40%;
      }
    }
  }
}
</style>
